<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./bootstrap@3.3.4/css/bootstrap.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* inner */
        .inner{
            width: 1195px;
            height: 1000px;
            margin:20px auto;
            border:1px solid red;
        }
        /* 头部 */
        .header{
            width: 100%;
            padding:22px 0 23px 0;
            display:flex;
            align-items: center;
        }
        .header .left{
            width: 281px;
            height: 100%;
        }
        .header .right{
            height: 80px;
            width: 814px;
            position: relative;
        }
        .header .right .m-nav{
            width: 687px;
            height: 40px;
            border:2px solid red;
            position: relative;
            display:flex;
            align-items: center;
            position: absolute;
            top:0;
            left:0;
        }
        .header .right .m-nav input{
            position: absolute;
            left:10px;
            width: 567px;
            height: 23px;
            outline: none;
            border:none;
            font-size:12px;
        }
        .header .right .m-nav input::placeholder{
            color:black;
        }
        .header .right .m-nav button{
            position: absolute;
            right:0;
            width: 95px;
            height: 40px;
            outline: none;
            border:none;
            cursor: pointer;
            background-color: red;
            color:white;
            font-size:18px;
        }
        .header .right .rsou{
            width: 100%;
            height: 40px;
            position: absolute;
            left:0;
            bottom:0;
            line-height: 40px;
        }
        .header .right .rsou a{
            color:#9B9B9B;
            font-size:12px;
            margin-right:20px;
            text-decoration: none;
        }
        .header .right .rsou a:first-child{
            color:red;
        }
        .header .right .rsou a:hover{
            color:red;
            text-decoration: underline;
        }
        /* 导航 */
        .nav{
            width: 1193px;
            height: 40px;
            border:1px solid #D8D8D8;
            margin:20px 0 20px 0;
            font-size:12px;
        }
        .nav .left{
            width: 215px;
            height: 100%;
            display:flex;
            align-items: center;
            justify-content: space-evenly;
            border-right:1px solid #D8D8D8;
        }
        .nav input{
            width:60px;
            height: 20px;
        }
        .nav .left button{
            display:none;
        }
        /* 内容区 */
        .content{
            width: 1192px;
            height: 366px;
            border:1px solid #D8D8D8;
            display:flex;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: space-between;
        }
        .content .sp{
            width: 234px;
            height: 366px;
            padding:22px 20px 0 20px;
            border-right:1px solid #D8D8D8;
        }
        .content .sp .top{
            border-bottom:1px solid #D8D8D8;
        }
        .content .sp .top .img{
            width: 194px;
            height: 198px;
            background-color:yellow;
        }
        .content .sp .top .img img{
            width: 194px;
            height: 198px;
        }
        .content .sp .top .title{
            width: 100%;
            height: 61px;
            font-size:14px;
            color:#D8D8D8;
            display:flex;
            align-items: center;
        }
        .content .sp .top .jg{
            width: 100%;
            height: 31px;
            display:flex;
            align-items: center;
        }
        .content .sp .top .jg .span1{
            color:red;
            font-size:18px;
            margin-right:10px;
        }
        .content .sp .top .jg .span2{
            color:#9B9B9B;
            font-size:14px;
            text-decoration: line-through;
        }
        .content .sp .top .pinpai{
            width: 100%;
            height: 17px;
            font-size:12px;
            color:#9B9B9B;
        }
        .content .sp .bottom{
            width: 100%;
            height: 19px;
            position: relative;
        }
        .content .sp .bottom .xiaoshou{
            position: absolute;
            width: 46px;
            height: 100%;
            top:9px;
            right:0;
            font-size:12px;
            color:#9B9B9B;
        }
    </style>
</head>

<body>
    <div class="inner">
        <!-- 头部 -->
        <div class="header">
            <div class="left">
                <img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
            </div>
            <div class="right">
                <div class="m-nav">
                    <input type="text" placeholder="女装">
                    <button>搜索</button>
                </div>
                <div class="rsou">
                    <a href="#">一淘限时抢</a>
                    <a href="#">置物架</a>
                    <a href="#">拖鞋</a>
                    <a href="#">运动鞋女</a>
                    <a href="#">优衣库</a>
                    <a href="#">女秋装</a>
                    <a href="#">帆布鞋</a>
                    <a href="#">女裤</a>
                    <a href="#">女衬衫</a>
                    <a href="#">洗发水</a>
                    <a href="#">mac</a>
                </div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <div class="left">
                <span>价格区间</span>
                <div class="jg">
                    <input type="text" placeholder="￥">-<input type="text" placeholder="￥">
                    <button>确定</button>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="sp">
                <div class="top">
                    <div class="img">
                        <img src="" alt="">
                    </div>
                    <div class="title">
                        22秋冬新款纯羊绒衫女简约黑灰白色撞色宽松休闲针织衫
                    </div>
                    <div class="jg">
                        <span class="span1">￥420.00</span>
                        <span class="span2">￥420.00</span>
                    </div>
                    <div class="pinpai">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="cj">华西高端羊绒精选</span>
                    </div>
                </div>
                <div class="bottom">
                    <div class="xiaoshou">
                        月销 <span class="xs">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>